<!-- 公共项 -->

<template>
  <div class="flex" :id="`form-item-no_${obj.no}`">
    <ShowSlot v-if="obj.no" noLabel flex0>
      <div :class="{ 'QuestionnaireDetail-MyQuestion-required': obj.required === 1 }">{{ obj.no }}</div>
    </ShowSlot>

    <div class="flex1">
      <ShowSlot v-if="obj.title" class="QuestionnaireDetail-MyQuestion-title" noLabel>{{ obj.title }}</ShowSlot>

      <div :class="`QuestionnaireDetail-MyQuestion-${obj.type}`">
        <slot />
      </div>

      <ShowSlot v-if="obj.remark" class="QuestionnaireDetail-MyQuestion-remark" noLabel>
        <div v-html="obj.remark.replace(/\n/g, '<br />')" />
      </ShowSlot>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'OurItem',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,
}
</script>
